<template>
  <div :class="`content-table ${utilList.length?'':'no-util'}`">
    <el-table
      border
      :data="firstCatalogTableValueList"
      style="width: 100%;height: 100%;"
      class="custom-table-header-bg"
    >
      <el-table-column
        v-for="item in firstCatalogTable"
        :key="item.title"
        :label="item.title"
        align="center"
        :width="item.width"
      >
        <template #default="scope">
          <!-- 单行文字列 -->
          <div v-if="item['type']==='text'">
            {{ scope.row[item.columns] }}
          </div>
          <!-- 单个图片列 -->
          <div v-if="item['type']==='img'">
            <img
              :src="scope.row[item.columns]"
              class="table-img"
            >
          </div>
          <!-- 详情 -->
          <div
            v-if="item['type']==='object-list-vertical-key-value'"
            class="multiple-line-wrapper"
          >
            <div
              v-for="item1 in getObjectList(scope.row,item,scope.$index)"
              :key="item1.id"
            >
              {{ item1.name }}: {{ item1.value }}
            </div>
          </div>
          <!-- 下载 -->
          <div
            v-if="item['type']==='object-list-horizon-link'"
            class="key-value-link-wrapper"
          >
            <div
              v-for="(item1,index1) in getObjectList(scope.row,item,scope.$index)"
              :key="item1.id"
              class="download-item"
              @click="download(item.list,scope.row,index1,item.sign_type)"
            >
              {{ item1.value }}
            </div>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup lang="ts">
import { useFirstCatalogData} from '@/stores/first-catalog-data'
import { parseJSONstr } from '@/utils'
import { storeToRefs } from 'pinia';
import { toRaw } from 'vue';

const firstCatalogDataStore = useFirstCatalogData();
const {firstCatalogTable, firstCatalogTableValueList,utilList,firstCatalogTableAttribute} = storeToRefs(firstCatalogDataStore);
console.log(firstCatalogTable,'---firstCatalogTable----')
const emit = defineEmits(['download'])

const download = (key: string, itemBig: any, index: number,sign_type:string) => {
  
  let objList = [];

  try {
    objList = JSON.parse({...toRaw(itemBig)}[key])
  } catch (ex) {
    objList = [];
  }
  const item = {
    size: (objList[index] || {}).fileSize,
    icon: itemBig.logo,
    sign_type,
    url:(objList[index] || {}).url,
    md5: (objList[index] || {}).md5,
    file_name: (objList[index] || {}).fileName,
    _type:'table',
    _index:index,
  }

  emit('download', item)
}

// const _parseJSONstr = parseJSONstr;

const getObjectList= (data:any, config:any, index:number)=> {
  let objectList = parseJSONstr(data[config.list])

  if (config.moreOneFilter && objectList.length > 1) { // 筛选规则
    objectList = objectList.filter((_item:any) => {
      let canUse = true
      for (const _key in config.moreOneFilter) {
        if (_item[_key] !== config.moreOneFilter[_key]) {
          canUse = false
        }
      }
      return canUse
    })
  }

  const newObj:any = {}
  const keyList = config.columns.split(',')
  keyList.forEach((_key:any) => {
    const _keyValueList:any[] = []
    objectList.forEach((_item:any) => {
      _keyValueList.push(_item[_key])
    })
    newObj[_key] = _keyValueList
  })

  const newList:any[] = []
  for (const _key in newObj) {
    newObj[_key].forEach((_item:any, _index:number) => {
      newList.push({
        id: index + '-' + _index,
        name: firstCatalogTableAttribute.value[config.list].list[_key].name,
        value: _item
      })
    })
  }

  return newList
}

</script>

<style scoped lang="scss">
.content-table{
  position: absolute;
  top:50px;
  right:10px;
  left:174px;
  bottom:172px;
  &.no-util{
    bottom:40px;
  }
  .custom-table-header-bg {
    --el-table-header-bg-color:#F9F9F9;
  }
  .multiple-line-wrapper{
    text-align: left;
  }
  .key-value-link-wrapper{
    display: flex;
    align-items: center;
    justify-content: center;
    gap:10px;
  }
  .download-item{
    text-decoration: underline;
    cursor: pointer;
    font-family: Microsoft YaHei, Microsoft YaHei;
    font-weight: 400;
    font-size: 14px;
    color: #192655;
  }
  .table-img{
    width: 104px;
    height: 80px;
    display: block;
    object-fit: contain;
  }
}
</style>